<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>我的订单</title>
    <style>
        .order-container {
            max-width: 1000px;
            margin: 20px auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        .order-card {
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 15px;
            margin-bottom: 15px;
        }
        .order-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }
        .order-status {
            padding: 3px 8px;
            border-radius: 3px;
            font-size: 12px;
            font-weight: bold;
        }
        .status-pending {
            background-color: #FFF3E0;
            color: #FB8C00;
        }
        .status-confirmed {
            background-color: #E8F5E9;
            color: #43A047;
        }
        .status-cancelled {
            background-color: #FFEBEE;
            color: #E53935;
        }
        .status-completed {
            background-color: #E3F2FD;
            color: #1E88E5;
        }
        .status-paid {
            background-color: #FFFDE7;
            color: #FBC02D;
        }
        .order-details {
            display: flex;
            justify-content: space-between;
        }
        .order-actions {
            margin-top: 10px;
            text-align: right;
        }
        .btn {
            padding: 5px 10px;
            border-radius: 3px;
            text-decoration: none;
            font-size: 14px;
            margin-left: 5px;
        }
        .btn-primary {
            background-color: #2196F3;
            color: white;
        }
        .btn-danger {
            background-color: #F44336;
            color: white;
        }
        .btn-pay {
            background-color: #FF9800;
            color: white;
        }
    </style>
</head>
<body>
<jsp:include page="head_order.jsp"/>
<div class="order-container">
    <h2>我的订单</h2>

    <c:if test="${empty orders}">
        <p>暂无订单记录</p>
    </c:if>

    <c:forEach items="${orders}" var="order">
        <div class="order-card">
            <div class="order-header">
                <span>订单号: ${order.order_id}</span>
                <span class="order-status status-${order.status.toLowerCase()}">
                    <c:choose>
                        <c:when test="${order.status == 'PENDING'}">待确认</c:when>
                        <c:when test="${order.status == 'CONFIRMED'}">已确认</c:when>
                        <c:when test="${order.status == 'CANCELLED'}">已取消</c:when>
                        <c:when test="${order.status == 'COMPLETED'}">已完成</c:when>
                        <c:when test="${order.status == 'PAID'}">已支付</c:when>
                        <c:otherwise>${order.status}</c:otherwise>
                    </c:choose>
                </span>
            </div>

            <div class="order-details">
                <div>
                    <p>服务类型: ${order.service_type}</p>
                    <p>日期: ${order.start_date} 至 ${order.end_date}</p>
                    <p>价格: ¥${order.price}</p>
                </div>
            </div>

            <div class="order-actions">
                <a href="/order/detail/${order.order_id}" class="btn btn-primary">查看详情</a>
                <c:if test="${order.status == 'PENDING'}">
                    <a href="/order/cancel/${order.order_id}" class="btn btn-danger">取消订单</a>
                    <form action="${pageContext.request.contextPath}/api/alipay/pay/${order.order_id}" method="post" style="display: inline;">
                        <button type="submit" class="btn btn-pay">支付宝支付</button>
                    </form>
                </c:if>
            </div>
        </div>
    </c:forEach>
</div>
</body>
</html>